<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
@keyframes test {
  from {
    -webkit-filter: saturate(0.25);
    filter: saturate(0.25);
  }
  to {
    -webkit-filter: saturate(0.75);
    filter: saturate(0.75);
  }
}
#target {
  animation: test 1e3s;
  height: 100px;
  width: 100px;
  background: green;
}
</style>
<div id="target"></div>
<script>
var asyncHandle = async_test('-webkit-filter + filter animations get composited.');
requestAnimationFrame(_ => {
  requestAnimationFrame(_ => {
    asyncHandle.step(_ => {
      assert_true(internals.isCompositedAnimation(target.getAnimations()[0]));
    });
    asyncHandle.done();
  });
});
</script>
